<template>
  <div class="ssvip">
    <div class="addbtn">
      <el-button type="text" @click="addStudent()">添加</el-button>
    </div>
    <!-- 学生信息 -->
    <el-table :data="resdata.slice((currentPage - 1)*pageSize,currentPage*pageSize)" max-height='550px'> border
      style="width: 100%">
      <el-table-column prop="number" label="ID" width="150" align='center'>
      </el-table-column>
      <el-table-column prop="number" label="姓名" width="150" align='center'>
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>班级: {{ scope.row.phone }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="class" label="班级" width="150" align='center'>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="150" align='center'>
      </el-table-column>
      <el-table-column label="性别" width="150" align='center'>
        <template slot-scope="scope">
          <span v-if="scope.row.sex == '0'">女</span>
          <span v-else>男</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" width="150" align='center'>
      </el-table-column>
      <el-table-column label="操作" align='center'>
        <template slot-scope="scope">
          <el-button size="mini" @click="updataIndex(scope.$index)">编辑</el-button>
          <!-- <el-button type="primary" size="mini">管理</el-button> -->
          <el-button type="info" size="mini" @click="centerDialogVisible1 = true">查看</el-button>
          <el-button size="mini" type="danger" @click="delData(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 20, 30, 40,50]"
          layout="total, sizes, prev, pager, next, jumper" :total="resdata.length">
        </el-pagination>
      </div>
    <!-- 学生信息编辑弹出框 -->
    <el-dialog title="请添加信息" :visible.sync="centerDialogVisible" width="30%" center>
      <el-form ref="form" v-model="upform" label-width="80px" class="faculty">
        <el-form-item label="ID">
          <el-input v-model="upform.number"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="upform.name"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="upform.class" placeholder="请选择班级" class='wid'>
            <el-option label="班级1" value="1"></el-option>
            <el-option label="班级2" value="2"></el-option>
            <el-option label="班级3" value="3"></el-option>
            <el-option label="班级4" value="4"></el-option>
            <el-option label="班级5" value="5"></el-option>
            <el-option label="班级6" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="upform.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="resource">
          <el-radio-group class="radio-group" v-model='upform.sex'>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="upform.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updata()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 学生添加弹出框 -->
    <el-dialog title="请添加信息" :visible.sync="centerDialogVisible2" width="30%" center>
      <el-form ref="form" :model="form" label-width="80px" class="faculty">
        <el-form-item label="ID">
          <el-input v-model="form.number"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="form.class" placeholder="请选择班级" class='wid'>
            <el-option label="班级1" value="1"></el-option>
            <el-option label="班级2" value="2"></el-option>
            <el-option label="班级3" value="3"></el-option>
            <el-option label="班级4" value="4"></el-option>
            <el-option label="班级5" value="5"></el-option>
            <el-option label="班级6" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="resource">
          <el-radio-group class="radio-group" v-model='form.sex'>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="PushStudentData()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 学生详细信息弹出框-->
    <div class="demo-fit">
      <el-dialog title="个人信息" :visible.sync="centerDialogVisible1" width="30%" center>
        <div class="block">
          <el-avatar shape="square" :size="100" :src="url"></el-avatar>
        </div>
        <div class="dis">
          <p>
            <span class="title">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</span>
            <span>康康</span>
          </p>
          <p>
            <span class="title">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
            <span>女</span>
          </p>
          <p>
            <span class="title">出生日期:</span>
            <span>2021-6-11</span>
          </p>
          <p>
            <span id="title">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯:</span>
            <span>武汉武昌</span>
          </p>
          <p>
            <span class="title">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历:</span>
            <span>共和国院士</span>
          </p>
          <p>
            <span class="title">班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级:</span>
            <span>前端5班</span>
          </p>
          <p>
            <span class="title">联系方式:</span>
            <span>110</span>
          </p>
          <p>
            <span class="title">家庭住址:</span>
            <span>广东省深圳市南山区平山村325栋4床</span>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible1 = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  // import StudentTC from "./students/StudentTC";
  export default {
    data() {
      return {
        //学生信息数据
        resdata: [],
        //学生信息编辑弹出框数据
        form: {
          age: "12",
          class: "8",
          discipline: "4",
          name: "李凯",
          number: 0,
          phone: "17478361343",
          sex: '男',
          state: "2"
        },
        upform: {
          age: "",
          class: "",
          discipline: "",
          name: "",
          number: '',
          phone: "",
          sex: '',
          state: "1"
        },
        //索引
        Index: '',
        //编辑学生信息判断
        centerDialogVisible: false,
        //查看个人信息判断
        centerDialogVisible1: false,
        //学生添加判断
        centerDialogVisible2: false,
        //头像路径
        url: '../../static/kkdetou.jpg',
        // 分页的参数
        total: this.total,
        currentPage: 1, //当前页数
        pageSize: 10 // 每页显示条数
      }
    },
    methods: {
      //分页方法
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        // console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      addStudent() {
        //点击弹出添加数据
        this.centerDialogVisible2 = true;
        this.form.number = this.resdata.length + 1;
      },
      PushStudentData() {
        //点击确定向resdata中添加数据并且清空form
        this.centerDialogVisible2 = false;
        this.resdata.push(this.form);
        this.form = {
          age: "",
          class: "",
          discipline: "",
          name: "",
          number: '',
          phone: "",
          sex: "",
          state: ""
        }
      },
      updataIndex(index) {
        //点击编辑弹出弹窗并获取index
        this.Index = index;
        this.centerDialogVisible = true;
      },
      updata() {
        //点击确定修改
        this.resdata[this.Index] = this.upform;
        this.centerDialogVisible = false;
        this.upform = {
          age: "",
          class: "",
          discipline: "",
          name: "",
          number: '',
          phone: "",
          sex: '',
          state: ""
        }
      },
      delData(index) {
        //删除学生信息
        this.resdata.splice(index, 1);
      }
    },
    mounted() {
      getStudent: {
        var _this = this;
        this.service({
          method: 'get',
          url: '/studentList',
          params: {},
        }).then((res) => {
          this.resdata = [...res.data.data];
          console.log(this.resdata);
        })
      };
    }
  }
</script>

<style scoped="scoped">
  .el-table {
    text-align: center;
  }

  .ssvip {
    position: relative;
  }

  .addbtn {
    position: absolute;
    top: 5px;
    right: 50px;
    z-index: 100;
  }

  .box {
    width: 520px;
    overflow: hidden;
  }

  .faculty {
    float: left;
  }

  .wid {
    width: 300px;
  }

  .radio-group {
    float: left;
    margin-top: 13px;
  }

  .title {
    font-weight: 600;
  }

  .dis {
    letter-spacing: 3px;
  }

  .btnsize {
    width: 200px;
  }

  .block {
    margin-top: 15px;
  }
</style>
